<template>
    <el-config-provider size="small">
        <div class="nota-view box-full">
            <div class="flex-col">
                <div class="flex-col-fixed">
                    <div class="flex-row box-border p-8">
                        <lv-input class="flex-row-auto" v-model="that.searchKeyWord.value" :ref="that.searchInputRef" placeholder="键入搜索" />
                        <el-button class="flex-row-fixed m-l-8" type="primary" @click="that.saveDialog.open()">添加</el-button>
                        <el-button class="flex-row-fixed" @click="that.exportDataDialog.open()">导出</el-button>
                        <el-button class="flex-row-fixed" @click="that.importData()">导入</el-button>
                    </div>
                </div>

                <div class="main-box flex-col-auto flex-row">
                    <div class="flex-row-fixed w-num-200">
                        <div class="scroll-wrap">
                            <div class="content-wrap">
                                <template v-for="(item, idx) of that.renderNotaData.value" :key="item.id">
                                    <div
                                        :class="{
                                            item: true,
                                            ['list-item-' + idx]: true,
                                            selected: that.curSelector.data && that.curSelector.data.id === item.id,
                                        }"
                                        @click="that.selectItemData(idx)"
                                    >
                                        {{ item.description }}
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>

                    <div class="item-detail flex-row-auto flex-row">
                        <div class="flex-row-auto flex-col">
                            <div class="flex-col-fixed flex-row-between" v-if="that.curSelector.data">
                                <div class="flex-row-center p-t-8 p-b-8">
                                    <el-tag>{{ that.curSelector.data.cate }}</el-tag>
                                    <el-tag type="info" class="m-l-8" v-show="that.curSelector.data.script">可执行脚本</el-tag>
                                    <el-tag type="info" class="m-l-8" v-show="that.curSelector.data.command">可执行命令</el-tag>
                                    <el-tag type="info" class="m-l-8" v-show="that.curSelector.data.immediate">立即执行</el-tag>
                                </div>
                                <div class="flex-row-center">
                                    <el-button
                                        type="text"
                                        class="color-success"
                                        @click="that.triggerCommandOrScript()"
                                        v-show="that.curSelector.data.script || that.curSelector.data.command"
                                    >
                                        执行
                                    </el-button>
                                    <template v-if="that.curSelector.data.from === 'custom'">
                                        <el-button type="text" @click="that.saveDialogByEdit()">编辑</el-button>
                                        <el-button type="text" class="color-danger" @click="that.deleteNotaData()">删除</el-button>
                                    </template>
                                </div>
                            </div>
                            <div class="flex-col-auto">
                                <template v-if="that.curSelector.data">
                                    <div v-show="that.curSelector.data.cwd">
                                        <div class="item-detail-label">cwd</div>
                                        <div class="text-wrap p-8 color-gray">{{ that.curSelector.data.cwd }}</div>
                                    </div>
                                    <div>
                                        <div class="item-detail-label" v-show="that.curSelector.data.script">script</div>
                                        <div class="item-detail-label" v-show="that.curSelector.data.command">commands</div>
                                        <div class="text-wrap p-8 color-gray">{{ that.curSelector.data.content }}</div>
                                    </div>
                                </template>
                            </div>
                        </div>

                        <div class="flex-row-fixed m-l-16" v-show="that.curSelector.data && (that.curSelector.data.command || that.curSelector.data.script)">
                            <div class="terminal-container"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 对话框 -->
            <div class="dialog-wrapper">
                <lv-dialog mode="confirm" title="保存" v-model:visible="that.saveDialog.visible.value" @close="that.saveDialog.close" @confirm="that.saveDialog.confirm">
                    <el-form label-width="60px" :model="that.saveDialog.formData" :rules="that.saveDialog.formRule" :ref="that.saveDialog.formRefKey">
                        <el-form-item prop="cate" label="分类">
                            <el-select filterable allow-create class="w-full no-placeholder" v-model="that.saveDialog.formData.cate">
                                <el-option :key="cate.name" v-for="cate of that.cateList.value" :value="cate.name">
                                    <span class="flex-row-between">
                                        <span>{{ cate.name }}</span>
                                    </span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="description" label="描述">
                            <lv-input v-model="that.saveDialog.formData.description" mode="textarea" :rows="2" />
                        </el-form-item>
                        <el-form-item prop="content" label="内容">
                            <lv-input v-model="that.saveDialog.formData.content" mode="textarea" :rows="10" resize="vertical" />
                        </el-form-item>
                        <el-form-item label="cwd">
                            <div class="flex-row">
                                <lv-input class="flex-row-auto" v-model="that.saveDialog.formData.cwd" />
                                <el-button icon="more" class="flex-row-fixed m-l-8" @click="that.selectCwdPath()" />
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox v-model="that.saveDialog.formData.script">可执行脚本</el-checkbox>
                            <el-checkbox v-model="that.saveDialog.formData.command">可执行命令</el-checkbox>
                            <template v-if="that.saveDialog.formData.script || that.saveDialog.formData.command">
                                <el-checkbox v-model="that.saveDialog.formData.async">异步执行</el-checkbox>
                                <el-checkbox v-model="that.saveDialog.formData.immediate">立即执行</el-checkbox>
                            </template>
                        </el-form-item>
                    </el-form>
                </lv-dialog>

                <lv-dialog
                    mode="confirm"
                    title="执行脚本或命令"
                    v-model:visible="that.runDialog.visible.value"
                    @close="that.runDialog.close"
                    @confirm="that.runDialog.confirm"
                >
                    <el-form label-width="60px" :model="that.runDialog.formData" :ref="that.runDialog.formRefKey">
                        <el-form-item label="内容">
                            <lv-input v-model="that.runDialog.formData.content" mode="textarea" :rows="8" resize="vertical" />
                        </el-form-item>
                        <el-form-item label="cwd">
                            <div class="flex-row">
                                <lv-input class="flex-row-auto" v-model="that.runDialog.formData.cwd" />
                                <el-button icon="more" class="flex-row-fixed m-l-8" @click="that.selectCwdPath()" />
                            </div>
                        </el-form-item>
                    </el-form>
                </lv-dialog>

                <lv-dialog
                    mode="confirm"
                    title="导出数据（导出字段配置）"
                    v-model:visible="that.exportDataDialog.visible.value"
                    @close="that.exportDataDialog.close"
                    @confirm="that.exportDataDialog.confirm"
                >
                    <el-form label-width="60px" :model="that.exportDataDialog.formData" :ref="that.exportDataDialog.formRefKey">
                        <el-form-item>
                            <el-checkbox v-model="that.exportDataDialog.formData.cwd">cwd</el-checkbox>
                        </el-form-item>
                    </el-form>
                </lv-dialog>
            </div>
        </div>
    </el-config-provider>
</template>

<script lang="ts">
import defineComponent from './mixins';
export default defineComponent;
</script>
